<template>
  <view class="ver-layout">
    <view class="card-layout ver-layout">
      <view class="card-line bottom hor-layout-side">
        <view>Bank Name</view>
        <view @click="showBankName=true">{{ selBankData.bank_name }}</view>
      </view>
      <u-picker :show="showBankName" title="选择银行" :closeOnClickOverlay="true" :columns="bankList"
                @confirm="confirmSelect" keyName="bank_name" :defaultIndex="this.selBank"></u-picker>
      <view class="card-line bottom hor-layout-side">
        <view>Bank Account Number</view>
        <u--input placeholder="请输入" inputAlign="right" border="none" clearable></u--input>
      </view>
      <view class="card-line hor-layout-side">
        <view>Bank Account Name</view>
        <u--input placeholder="请输入" inputAlign="right" border="none" clearable></u--input>
      </view>
    </view>

    <view class="submit-view">
      <u-button type="primary" text="Submit" @click="confirmSubmit"></u-button>
    </view>
  </view>
</template>

<script>
import bankList from '@/mock/bankList.json'

export default {
  name: "newBankAccount",
  data() {
    return {
      showBankName: false,
      bankList: [bankList],
      selBank: [0]
    }
  },
  computed: {
    selBankData() {
      return this.bankList[0][this.selBank[0]]
    }
  },
  methods: {
    confirmSelect(value) {
      this.selBank = value.indexs
      this.showBankName = false
    },
    confirmSubmit() {
      this.$tools.pageBackDelay("提交成功！")
    }
  }
}
</script>

<style scoped lang="scss">
.card-layout {
  margin: 13px;
  padding: 13px;
  font-size: small;
  background: white;
  border-radius: 7px;
}

.card-line {
  height: 40px;
  line-height: 40px;
}

.card-line.bottom {
  border-bottom: 1px solid #dcd6d6;
}

.submit-view {
  width: 100px;
  margin: auto;
  margin-top: 30%;
}
</style>
